<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Betterlife Front UI</title>

    <link rel="stylesheet" href="../../css/common.min.css">
    <script type="text/javascript" src="../../js/common/base.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style type="text/css">
.us .intro .cover {
    background: url(../../images/overlay.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.us .intro .intro-page {
    padding: 150px 0 130px;
    background: url(../../images/beauty.jpg) center no-repeat #313131;
    background-size: 100% auto;
}
</style>
</head>
<body>
    <!-- main nav begin -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-navbar" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-sidebar" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
        <span class="sr-only"></span>
        <i class="glyphicon glyphicon-briefcase"></i>
      </button>
      <button type="button" class="navbar-toggle collapsed" id="btn-toggle-searchbar" data-toggle="collapse" data-target="#searchbar" aria-expanded="false" aria-controls="searchbar">
        <span class="sr-only"></span>
        <i class="fa fa-search"></i>
      </button>
      <a class="navbar-brand" href="/">
        <img src="../../images/logo.png" /> <span>Betterlife Front UI</span>
      </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../../">首页</a></li>
        <li><a href="../../html/blog/index.html">博客</a></li>
        <li><a href="../../html/featured/index.html">发现</a></li>
        <li><a href="../../html/us/index.html">我们</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            其它
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dLabel">
            <li><a href="http://www.iqiyi.com/" target="_blank">电影</a></li>
            <li><a href="https://y.qq.com/" target="_blank">音乐</a></li>
            <li><a href="http://36kr.com/" target="_blank">研发</a></li>
            <li><a href="https://www.jd.com/" target="_blank">购物</a></li>
            <li><a href="../../html/model/preview.html">话题</a></li>
            <li><a href="https://www.pengfu.com/" target="_blank">幽默</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-user"></span>
            <span class="username">skygreen</span>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dLabel">
            <li><a href="../../html/home.html"><span class="glyphicon glyphicon-edit"></span>后台管理</a></li>
            <li><a href="#reset"><span class="glyphicon glyphicon-edit"></span>修改密码</a></li>
            <li><a href="../../login.html"><span class="glyphicon glyphicon-off"></span>退出</a></li>
          </ul>
        </li>
        <li id="searchbar-li" class="search-toggle collapsed" data-toggle="collapse" data-target="#searchbar" aria-expanded="false" aria-controls="searchbar">
          <a>
            <span><span class="menu-search-text">搜索</span><span class="fa fa-search" aria-hidden="true"></span></span>
          </a>
        </li>
        <li><a id="btn-layout-small"><i class="glyphicon glyphicon-resize-small"></i></a></li>
      </ul>
    </div>
  </div>
  <div id="searchbar" class="collapse">
    <div id="searchbar-inner">
      <form method="get" action="" class="searchbar-form">
        <input id="t-search" type="search" class="form-control" name="search" autocomplete="off" autofocus="autofocus" placeholder="搜你所想">
        <i id="searchbar-close" class="fa fa-remove search-toggle"></i>
      </form>
    </div>
  </div>
</nav>

    <!-- /main nav end -->

    <!--content begin-->
    <div class="us">
      <!-- <div class="content-wrapper"> -->
        <div id="main-content-container" class="container-fluid">
            <!-- Banner content -->
            <section class="section section-header">
                <div class="parallax pattern-image">
                    <img src="../../images/beauty.jpg">
                    <!-- <img src="https://lorempixel.com/1800/1000?r=1" /> -->
                    <div class="container">
                        <div class="content">
                            <h1>Creative Work</h1>
                            <div class="separator-container">
                                <div class="separator line-separator">∎</div>
                            </div>
                            <h5>Awesome Bootstrap idea and skill to build better websites</h5>
                            <a href="#contact" class="scroll-arrow">
                              <i class="fa fa-angle-down"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Intro top content -->
            <section class="intro" id="home">
                <div class="cover"></div>
                <div class="intro-body intro-page">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 animated text-slide">
                                <div id="intro-slider" class="flexslider">
                                    <ul class="slides">
                                        <li>
                                            <h3 class="brand-heading">We will design your future</h3>
                                            <div class="line"></div>
                                            <p class="intro-text yah">
                                                Betterlife以“只为更好”为核心，致力于帮助热爱生活、热爱科技的人群发现好的技术，发现兴趣相投的朋友。
                                            </p>
                                        </li>
                                        <li>
                                            <h3 class="brand-heading">WE CREATE Digital Experience</h3>
                                            <div class="line"></div>
                                            <p class="intro-text yah">
                                                通过产品创新和技术创新，让用户随时随地找到好玩的技术，认识更多与自己兴趣爱好一致的人。拥有好奇心探索世界的奥秘。
                                            </p>
                                        </li>
                                        <li>
                                            <h3 class="brand-heading">We will design your ideas</h3>
                                            <div class="line"></div>
                                            <p class="intro-text yah">
                                                它包括一套实用的通用模版、后台管理模版、手机模版，并根据项目的需要，按照数据库的设计一键生成定制化的代码框架。
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Intro top content -->

            <!-- About content -->
            <section class="about-content" id="about">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 welcome-text animated">
                            <h3>关于我们</h3>

                            <div class="line1"></div>
                            <p style="text-align:left;">
                                <span class="yahei">来自中国的skygreen以“只为更好”为核心探索新科技和技术的的框架。
                                    <br>框架创建于2010年4月，自创建以来，skygreen就专注于定向活动领域。旗下产品Betterlife是国内独创的一站式CMS平台。
                                    <br>Skygreen把前端技术和PHP充分结合，根据反复实践，利用Bootstrap、Jquery、Vue、Angular、React等技术完成各种各样的Web开发任务，从而创造一个创新、易读、阳光的开发世界。
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <!-- About content -->

            <!-- Facts content -->
            <section class="facts-content" id="facts" data-slide="1" data-stellar-background-ratio="0.5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 fact-info animated">
                            <h4>产品下载<span>Product download</span></h4>
                            <div class="downloads">
                                <ul class="row product-intro xs_eighty zoomzerosix">
                                    <li class="col-xs-6 col-md-6 down-item ">
                                        <a href="">
                                            <i class="icon fa fa-apple fa-5x"></i>
                                            <p>iPhone</p>
                                        </a>
                                    </li>
                                    <li class="col-xs-6 col-md-6 down-item">
                                        <a href="">
                                            <i class="icon1 fa fa-android fa-5x"></i>
                                            <p>安卓</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 fact-info animated zoomzeroseven">
                            <h4>功能介绍<span>Function introduction</span></h4>
                            <div class="product-intro textc">
                                <ul>
                                    <li class="clearfix">
                                        <i class="icon fa fa-times-circle-o fa-4x"></i>
                                        <strong>精选 ——</strong>
                                        <span>根据你的喜好推荐方案<br/>做最懂你的APP</span>
                                    </li>
                                    <li class="clearfix">
                                        <i class="icon fa fa-calendar-check-o fa-3x"></i>
                                        <strong>今天 ——</strong>
                                        <span>提供最实时的科技力量<br/>发现此时此刻的技术</span>
                                    </li>
                                    <li class="clearfix">
                                        <i class="icon fa fa-weixin fa-3x"></i>
                                        <strong>社交 ——</strong>
                                        <span>丰富兴趣群组团队功能<br/>发现周边的技术达人</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Facts content -->

            <!-- Activity content -->
            <section class="activity-content" id="activity">
                <div class="container">
                    <div class="row">
                        <div class="fade-text animated">
                            <h3>热门技术</h3>
                            <div class="line1"></div>
                        </div>
                        <div class="space90"></div>
                        <div class="col-md-12 no-padding">
                            <div class="col-md-3 staff-content animated">
                                <div class="staff-img">
                                    <a href=""><img src="../../images/beauty.jpg" class="img-responsive" alt="Water"/></a>
                                </div>
                                <h4>Javascript<span class="yah">1996.03.10</span></h4>
                            </div>
                            <div class="col-md-3 staff-content animated">
                                <div class="staff-img">
                                    <a href=""><img src="../../images/beauty.jpg" class="img-responsive" alt="Cola"/></a>
                                </div>
                                <h4>PHP<span class="yah">1994.9.16</span></h4>
                            </div>

                            <div class="col-md-3 staff-content animated">
                                <div class="staff-img">
                                    <a href=""><img src="../../images/beauty.jpg" class="img-responsive" alt="Juice"/></a>
                                </div>
                                <h4>MySQL<span class="yah">1995.5.23</span></h4>
                            </div>
                            <div class="col-md-3 staff-content animated">
                                <div class="staff-img">
                                    <a href="#"><img src="../../images/beauty.jpg" class="img-responsive" alt="Fenda"/></a>
                                </div>
                                <h4>Python <span class="yah">1989.12.24</span></h4>
                            </div>
                        </div>
                        <div class="space90"></div>
                    </div>
                </div>
            </section>
            <!-- Activity content -->

            <!-- Portfolio content -->
            <section class="portfolio-line" id="">
                <div class="container"><div class="row"><div class="col-md-12 comment-content-border"></div></div></div>
            </section>

            <section class="portfolio-wrap" id="portfolio">
                <div class="fade-text animated">
                    <h3>热门话题</h3>
                </div>
                <div class="line1"></div>
                <div class="space90"></div>
                <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8 no-padding portfolio-main" id="contain">
                    <ul id="filters" class="clearfix">
                        <li><span class="filter" data-filter="all">All</span></li>
                        <li><span class="filter" data-filter=".sort1">Web Design</span></li>
                        <li><span class="filter" data-filter=".sort2">Dev Bible</span></li>
                        <li><span class="filter" data-filter=".sort3">ITs Skill</span></li>
                        <li><span class="filter" data-filter=".sort4">New Discover</span></li>
                    </ul>
                    <div id="portfoliolist">
                        <div class="portfolio fact-info animated sort3">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="SaltTiger"/>
                                <div class="overlay1">
                                    <a href="https://salttiger.com/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">SaltTiger</div><div class="p2">每天一本编程书，每天进步一点点</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="鸟哥的Linux私房菜"/>

                                <div class="overlay1">
                                    <a href="http://linux.vbird.org/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">鳥哥的 Linux 私房菜</div><div class="p2">Linux的学习曲线</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort2">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="Ext JS"/>

                                <div class="overlay1">
                                    <a href="https://docs.sencha.com/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Sencha Ext JS</div><div class="p2">build data-intensive web app</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="content management system"/>

                                <div class="overlay1">
                                    <a href="https://www.joomla.org/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Joomla!</div><div class="p2"> award-winning CMS</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort2">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="一套框架，多种平台"/>

                                <div class="overlay1">
                                    <a href="https://angular.cn/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Angular</div><div class="p2">移动端 & 桌面端</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="Learn to Program. For Free."/>

                                <div class="overlay1">
                                    <a href="http://inventwithpython.com/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Invent with Python</div><div class="p2">Automate the Boring Stuff with Python</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort4">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="Leaner Style Sheets"/>

                                <div class="overlay1">
                                    <a href="http://lesscss.org/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Getting started|Less.js</div><div class="p2">It's CSS, with just a little more.</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="廖雪峰的官方网站"/>

                                <div class="overlay1">
                                    <a href="https://www.liaoxuefeng.com/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">廖雪峰的官方网站</div><div class="p2">JavaScript教程</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort4">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="Intro"/>

                                <div class="overlay1">
                                    <a href="http://bonsaiden.github.io/JavaScript-Garden/" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">JavaScript Garden</div><div class="p2">most quirky parts of the JavaScript</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="国内顶尖团队"/>

                                <div class="overlay1">
                                    <a href="https://github.com/niezhiyang/open_source_team" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">国内顶尖团队的开源地址</div><div class="p2">使自己的项目变得简单</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort1">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="最火的前端开源项目"/>

                                <div class="overlay1">
                                    <a href="https://gist.github.com/dypsilon/5819504" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">最火的前端开源项目</div><div class="p2">badass list of frontend development resources</div></div>
                        </div>
                        <div class="portfolio fact-info animated sort3">
                            <div class="portfolio-wrapper">
                                <img src="../../images/beauty.jpg" alt="Free Online IDE and Terminal"/>

                                <div class="overlay1">
                                    <a href="https://www.tutorialspoint.com/codingground.htm" target="_blank">
                                        <div class="overlay-text">View Website</div>
                                    </a>
                                </div>
                            </div>
                            <div class="project_intruduction"><div class="p1">Free Online IDE and Terminal</div><div class="p2">Coding Platform For Your Websit</div></div>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
                <a class="btn1" style="opacity: 0"></a>
            </section>
            <!-- Portfolio content -->

            <!-- Business Enter -->
            <section class="business-wrap" id="business">
                <div class="fade-text animated">
                    <h3>宾朋云集</h3>
                </div>
                <div class="line1"></div>
                <div class="space90"></div>

                <div class="container fade-text animated">
                    <div class="partner row">
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/96140fe7.docker.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/1d661184.aliyun.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/d3499aa5.qcloud.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/846a9bcd.aws.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/fe14a319.ucloud.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/f933fa0f.azure.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/dace51c5.qiniu.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/2d469214.qingcloud.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/1b9118a5.vianet.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/9b9cf033.51idc.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/5b7ffad2.coding1.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/3607431d.cds.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/b848e856.GitCafe.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/22f95ddf.segmentfault.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/c2c9b7e4.oschina.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/7d73f84b.plcloud.png"></div>
                        <div class="col-xs-4 col-sm-3 col-md-2"><img
                            src="https://dn-daowww-prod.qbox.me/images/baef643d.pubu.png"></div>
                    </div>
                </div>
            </section>
            <!-- Business Enter -->

            <!-- Contact content -->
            <section class="contact-wrap" id="contact">
                <div class="container">
                    <div class="row">
                        <div class="fade-text animated">
                            <h3><img src="../../images/qrcode.png" width="152" height="152" alt="微信号SEA_INTERACTION"></h3>
                            <div class="line1"></div>
                            <p><span class="yahei">只为更好让我们喜欢卷起衣袖，开始一个崭新的项目。让我们一起做一些Better的事情。<br></span>
                            There’s nothing we like more than rolling up our sleeves and starting a brand new project. Let’s make something better together.</p>
                        </div>
                        <div class="space80"></div>
                        <div class="col-md-12 no-padding">
                            <div class="col-md-4 contact-info animated">
                                <h5><i class="fa fa-phone"></i> Telephone</h5>
                                <p>+86-139-1732-0293</p>
                            </div>
                            <div class="col-md-4 contact-info animated">
                                <h5><i class="fa fa-map-marker"></i> Address</h5>
                                <p><span class="yahei">上海静安区静安公园静安寺666号8单元108室(虚拟)</span></p>
                            </div>
                            <div class="col-md-4 contact-info animated">
                                <h5><i class="fa fa-envelope"></i> Email</h5>
                                <p>skygreen2001@gmail.com </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Contact content -->
        </div>
      <!-- </div> -->

      <!-- footer begin -->
      
    <footer class="text-muted">
        <div id="footer-inner" class="container clr">
            <div id="copyright" class="clr" role="contentinfo">
                © 2017-2020 Betterlife - All Rights Reserved.&nbsp;
                <div id="link" class="clr" role="linkinfo"><a title="License" href="https://github.com/skygreen2001/betterlife.front/blob/master/LICENSE" target="_blank">License</a>&nbsp;| <a title="Help" href="https://github.com/skygreen2001/betterlife.front" target="_blank">Help</a></div>
            </div>
        </div>
    </footer>

    <div class="return-top">
        <span class="icon-stack fa-3x">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-minus fa-inverse fa-stack-1x up"></i>
          <i class="fa fa-arrow-up fa-inverse fa-stack-1x down"></i>
        </span>
    </div>

    <script type="text/javascript" src="../../js/common/bower/bower.min.js"></script>
    <script type="text/javascript" src="../../js/normal/common.js"></script>
    <script type="text/javascript" src="../../js/normal/layout.js"></script>

      <!-- /footer end -->
    </div>
    <!-- /content end -->

    <script src="../../js/common/bower/index.bower.min.js"></script>
    <script src="../../js/core/us.js"></script>
</body>
</html>
